<template>
    <div class="nav">
        <!-- svg -->
        <svg width="32" height="32" viewBox="0 0 32 32" style="margin-top: 20px;margin-left:20px">
            <defs>
                <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
                    <stop stop-color="#A5B4FC" stop-opacity="0" offset="0%"></stop>
                    <stop stop-color="#A5B4FC" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
                    <stop stop-color="#38BDF8" stop-opacity="0" offset="0%"></stop>
                    <stop stop-color="#38BDF8" offset="100%"></stop>
                </linearGradient>
            </defs>
            <rect fill="#6366F1" width="32" height="32" rx="16"></rect>
            <path
                d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z"
                fill="#4F46E5"></path>
            <path
                d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z"
                fill="url(#logo-a)"></path>
            <path
                d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z"
                fill="url(#logo-b)"></path>
        </svg>

        <ul style="margin-top: 50px;margin-left:20px">
            <li style="color:#677489;font-size:12px;font-weight:bold">
                PAGES
            </li>

            <li class="flex items-center space-x-2" @click="() => $router.push('/index').catch(err => { })"
                style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:20px">
                <!-- 首页的svg -->
                <span><svg t="1684294132022" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2388" width="15" height="15">
                        <path
                            d="M223.444 424.016A60 60 0 0 0 202 469.986V822h170V606c0-33.138 26.862-60 60-60h160c33.138 0 60 26.862 60 60v216h170V469.986a60 60 0 0 0-21.444-45.97l-250-209.678c-22.3-18.704-54.812-18.704-77.112 0l-250 209.678zM562 636h-100v186c0 49.706-40.294 90-90 90h-170c-49.706 0-90-40.294-90-90V469.986a150 150 0 0 1 53.608-114.928l250-209.678c55.754-46.76 137.03-46.76 192.784 0l250 209.678A150 150 0 0 1 912 469.986V822c0 49.706-40.294 90-90 90h-170c-49.706 0-90-40.294-90-90v-186z"
                            fill="#E3E8EF" p-id="2389"></path>
                    </svg>
                </span>
                <span>首页</span>
            </li>

            <li class="flex items-center space-x-2"
                style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:20px" @click="GoodsSubmenu">
                <!-- 商品的svg -->
                <span><svg t="1684294775445" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3556" width="15" height="15">
                        <path
                            d="M765.123048 121.904762a73.142857 73.142857 0 0 1 65.414095 40.423619l63.829333 127.634286A73.142857 73.142857 0 0 1 902.095238 322.681905V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V328.630857a73.142857 73.142857 0 0 1 7.289905-31.817143l64.536381-133.607619A73.142857 73.142857 0 0 1 259.584 121.904762h505.539048zM828.952381 365.714286H195.047619v463.238095h633.904762V365.714286z m-365.714286 73.142857v73.142857h-195.047619v-73.142857h195.047619zM259.584 195.047619l-47.128381 97.52381h601.453714l-48.786285-97.52381H259.584z"
                            p-id="3557" fill="#E3E8EF"></path>
                    </svg>
                </span>
                <span>商品</span>
                <span v-if="isGoodsSubmenuOpen">
                    <svg t="1684140376597" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14557" width="15"
                        style="margin-left: 70px;font-weight:bold">
                        <path
                            d="M316.9 473.8l333-333.1c17-17 44.5-17 61.49999999 0s17 44.5 1e-8 61.5l-309.69999999 309.8 309.69999999 309.7c17 17 17 44.5 0 61.50000001s-44.5 17-61.5-1e-8l-333-333c-10.4-10.4-19-24.701-16.599-38.2-2.4-13.5 6.1-27.8 16.599-38.2z"
                            p-id="14558" fill="#ffffff"></path>
                    </svg>
                </span>

                <span v-else>
                    <svg t="1684139878413" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6926" width="15" style="margin-left: 70px;">
                        <path
                            d="M707.1 550.2l-333 333.1c-17 17-44.5 17-61.5 0s-17-44.5 0-61.5L622.3 512 312.6 202.3c-17-17-17-44.5 0-61.5s44.5-17 61.5 0l333 333c10.4 10.4 19 24.7 16.6 38.2 2.4 13.5-6.1 27.8-16.6 38.2z"
                            p-id="6927" data-spm-anchor-id="a313x.7781069.0.i11" class="selected" fill="#ffffff"></path>
                    </svg>
                </span>
            </li>
            <ul v-show="isGoodsSubmenuOpen">
                <li class="flex items-center space-x-2 " @click="() => $router.push('/goods/list').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;margin-left:20px;margin-top:10px;font-weight:bold">
                    <span>
                        <svg t="1684303860375" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2339" width="15" height="15">
                            <path
                                d="M146.571481 49.951219 347.295185 49.951219C388.825594 49.951219 422.4 83.45593 422.4 125.058766L422.4 349.47782C422.4 390.977141 388.764036 424.585365 347.295185 424.585365L146.571481 424.585365C105.041073 424.585365 71.466667 391.080655 71.466667 349.47782L71.466667 125.058766C71.466667 83.559445 105.10263 49.951219 146.571481 49.951219ZM21.333333 349.47782C21.333333 418.650511 77.335661 474.536585 146.571481 474.536585L347.295185 474.536585C416.483543 474.536585 472.533333 418.533018 472.533333 349.47782L472.533333 125.058766C472.533333 55.886075 416.531006 0 347.295185 0L146.571481 0C77.383122 0 21.333333 56.003567 21.333333 125.058766L21.333333 349.47782Z"
                                fill="#cdcdcd" p-id="2340"></path>
                            <path
                                d="M146.571481 599.414635 347.295185 599.414635C388.825594 599.414635 422.4 632.919345 422.4 674.52218L422.4 898.941233C422.4 940.440555 388.764036 974.048781 347.295185 974.048781L146.571481 974.048781C105.041073 974.048781 71.466667 940.54407 71.466667 898.941233L71.466667 674.52218C71.466667 633.022859 105.10263 599.414635 146.571481 599.414635ZM21.333333 898.941233C21.333333 968.113924 77.335661 1024 146.571481 1024L347.295185 1024C416.483543 1024 472.533333 967.996433 472.533333 898.941233L472.533333 674.52218C472.533333 605.349489 416.531006 549.463415 347.295185 549.463415L146.571481 549.463415C77.383122 549.463415 21.333333 605.466982 21.333333 674.52218L21.333333 898.941233Z"
                                fill="#cdcdcd" p-id="2341"></path>
                            <path
                                d="M998.933333 149.853658C1012.777271 149.853658 1024 138.671697 1024 124.878049 1024 111.0844 1012.777271 99.902439 998.933333 99.902439L572.8 99.902439C558.956062 99.902439 547.733333 111.0844 547.733333 124.878049 547.733333 138.671697 558.956062 149.853658 572.8 149.853658L998.933333 149.853658Z"
                                fill="#cdcdcd" p-id="2342"></path>
                            <path
                                d="M998.933333 274.731708C1012.777271 274.731708 1024 263.549745 1024 249.756098 1024 235.962449 1012.777271 224.780489 998.933333 224.780489L572.8 224.780489C558.956062 224.780489 547.733333 235.962449 547.733333 249.756098 547.733333 263.549745 558.956062 274.731708 572.8 274.731708L998.933333 274.731708Z"
                                fill="#cdcdcd" p-id="2343"></path>
                            <path
                                d="M998.933333 399.609756C1012.777271 399.609756 1024 388.427795 1024 374.634146 1024 360.840497 1012.777271 349.658537 998.933333 349.658537L572.8 349.658537C558.956062 349.658537 547.733333 360.840497 547.733333 374.634146 547.733333 388.427795 558.956062 399.609756 572.8 399.609756L998.933333 399.609756Z"
                                fill="#cdcdcd" p-id="2344"></path>
                            <path
                                d="M998.933333 674.341463C1012.777271 674.341463 1024 663.159503 1024 649.365854 1024 635.572205 1012.777271 624.390244 998.933333 624.390244L572.8 624.390244C558.956062 624.390244 547.733333 635.572205 547.733333 649.365854 547.733333 663.159503 558.956062 674.341463 572.8 674.341463L998.933333 674.341463Z"
                                fill="#cdcdcd" p-id="2345"></path>
                            <path
                                d="M998.933333 799.219511C1012.777271 799.219511 1024 788.037551 1024 774.243902 1024 760.450255 1012.777271 749.268292 998.933333 749.268292L572.8 749.268292C558.956062 749.268292 547.733333 760.450255 547.733333 774.243902 547.733333 788.037551 558.956062 799.219511 572.8 799.219511L998.933333 799.219511Z"
                                fill="#cdcdcd" p-id="2346"></path>
                            <path
                                d="M998.933333 924.097562C1012.777271 924.097562 1024 912.915599 1024 899.121952 1024 885.328303 1012.777271 874.146342 998.933333 874.146342L572.8 874.146342C558.956062 874.146342 547.733333 885.328303 547.733333 899.121952 547.733333 912.915599 558.956062 924.097562 572.8 924.097562L998.933333 924.097562Z"
                                fill="#cdcdcd" p-id="2347"></path>
                        </svg>
                    </span>
                    <span>商品列表</span>
                </li>
                <li class="flex items-center space-x-2" @click="() => $router.push('/goods/review').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;font-weight:bold;margin-top:10px;margin-left:20px">
                    <span>
                        <svg t="1684304198054" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3520" width="15" height="15">
                            <path
                                d="M320 288v-22.016q2.016-86.016 56-143.008T512 63.968q82.016 2.016 136 59.008T704 265.984V288h131.008q12.992 0 21.504 8t10.496 20.992l56.992 576q2.016 14.016-7.488 24.512t-23.488 10.496H131.008q-14.016 0-23.488-10.496t-7.488-24.512l56.992-576q2.016-12.992 10.496-20.992T189.024 288h131.008z m64 0h256v-22.016q-0.992-59.008-37.504-98.016T512 127.968q-54.016 0.992-90.496 40T384 265.984V288z m-64 64H217.984L166.976 864h690.016l-51.008-512h-102.016v96q0 14.016-8.992 23.008t-23.008 8.992-23.008-8.992-8.992-23.008v-96h-256v96q0 14.016-8.992 23.008t-23.008 8.992-23.008-8.992T319.968 448v-96z"
                                p-id="3521" fill="#cdcdcd"></path>
                        </svg>
                    </span>
                    <span>待审核商品</span>
                </li>
            </ul>


            <!-- 下面是订单列表 -->

            <li class="flex items-center space-x-2"
                style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:20px" @click="OrderSubmenu">
                <!-- 首页的svg -->
                <span>
                    <svg t="1684304708009" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4973" width="15" height="15">
                        <path
                            d="M224 831.936V192.096L223.744 192 800 192.096 800.256 832 224 831.936zM800.256 128H223.744A64 64 0 0 0 160 192.096v639.84A64 64 0 0 0 223.744 896h576.512A64 64 0 0 0 864 831.936V192.096A64 64 0 0 0 800.256 128z"
                            fill="#cdcdcd" p-id="4974"></path>
                        <path
                            d="M640 416h-256a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64M640 576h-256a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64"
                            fill="#cdcdcd" p-id="4975"></path>
                    </svg>
                </span>
                <span>订单</span>
                <span v-if="isOrderSubmenuOpen">
                    <svg t="1684140376597" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14557" width="15"
                        style="margin-left: 70px;font-weight:bold">
                        <path
                            d="M316.9 473.8l333-333.1c17-17 44.5-17 61.49999999 0s17 44.5 1e-8 61.5l-309.69999999 309.8 309.69999999 309.7c17 17 17 44.5 0 61.50000001s-44.5 17-61.5-1e-8l-333-333c-10.4-10.4-19-24.701-16.599-38.2-2.4-13.5 6.1-27.8 16.599-38.2z"
                            p-id="14558" fill="#ffffff"></path>
                    </svg>
                </span>

                <span v-else>
                    <svg t="1684139878413" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6926" width="15" style="margin-left: 70px;">
                        <path
                            d="M707.1 550.2l-333 333.1c-17 17-44.5 17-61.5 0s-17-44.5 0-61.5L622.3 512 312.6 202.3c-17-17-17-44.5 0-61.5s44.5-17 61.5 0l333 333c10.4 10.4 19 24.7 16.6 38.2 2.4 13.5-6.1 27.8-16.6 38.2z"
                            p-id="6927" data-spm-anchor-id="a313x.7781069.0.i11" class="selected" fill="#ffffff"></path>
                    </svg>
                </span>
            </li>
            <ul v-show="isOrderSubmenuOpen">
                <li class="flex items-center space-x-2 " @click="() => $router.push('/order/list').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;margin-left:20px;margin-top:10px;font-weight:bold">
                    <span>
                        <svg t="1684304838980" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6131" width="15" height="15">
                            <path
                                d="M875.74528 210.98496c0-59.81696-47.93344-108.47744-106.8544-108.47744H253.73696c-58.91584 0-106.84928 48.66048-106.84928 108.47744v613.83168c0 59.81184 47.93344 108.47232 106.84928 108.47232H636.68736c1.6896 0 3.33824-0.17408 4.95616-0.44032 0.22528-0.03584 0.45056-0.06144 0.67584-0.1024 1.59232-0.29696 3.13856-0.72704 4.6336-1.25952l0.75264-0.27648a30.88896 30.88896 0 0 0 9.05216-5.44256c0.08192-0.07168 0.1792-0.11776 0.26112-0.18944l208.36352-184.32a30.63808 30.63808 0 0 0 10.27072-25.01632c0.04096-0.64 0.09728-1.27488 0.09728-1.91488V210.98496zM208.32256 824.81664V210.98496c0-25.9328 20.37248-47.03744 45.40928-47.03744h515.15392c25.04192 0 45.4144 21.09952 45.4144 47.03744v472.30976l-176.5376-1.76128c-8.28928-0.01024-16.0512 3.0976-21.87264 8.84736a30.72512 30.72512 0 0 0-9.14944 21.74464l-0.67072 159.7184H253.73696c-25.04192 0-45.4144-21.09952-45.4144-47.0272z m560.89088-80.52736l-101.54496 89.8304 0.384-90.83904 101.16096 1.00864z"
                                fill="#cdcdcd" p-id="6132"></path>
                            <path
                                d="M300.74368 307.75296h406.85568a30.72 30.72 0 0 0 0-61.44H300.74368a30.72 30.72 0 0 0 0 61.44zM300.74368 470.7072h406.85568a30.72 30.72 0 0 0 0-61.44H300.74368a30.72 30.72 0 0 0 0 61.44zM738.31936 596.92544a30.72 30.72 0 0 0-30.72-30.72H300.74368a30.72 30.72 0 0 0 0 61.44h406.85568a30.72 30.72 0 0 0 30.72-30.72z"
                                fill="#cdcdcd" p-id="6133"></path>
                        </svg>
                    </span>
                    <span>订单列表</span>
                </li>
            </ul>

            <!-- 下面是商家列表 -->

            <li class="flex items-center space-x-2"
                style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:20px"
                @click="SupplierSubmenu">
                <!-- 首页的svg -->
                <span>
                    <svg t="1684306028107" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8567" width="15" height="15">
                        <path
                            d="M795.591194 63.739684 226.198359 63.739684 63.510452 343.589491c0 0 0 95.998913 0 111.940741 3.323858 28.184228 15.217293 56.068613 32.532465 77.631732l0 321.099211c0 61.817823 48.02504 106.019608 111.790308 106.019608l606.125149 0c63.766291 0 102.096063-44.200762 102.096063-106.019608L916.054438 533.161964c19.59009-23.062335 31.508086-40.402067 43.150799-77.631732 0-30.63414 0-111.940741 0-111.940741L795.591194 63.739684zM247.110624 106.416669l517.872013 0 129.480028 234.721885L117.629573 341.138555 247.110624 106.416669zM808.15902 918.254652 203.935265 918.254652c-31.883657 0-64.742572-33.08303-64.742572-63.990406l0.001023 0 0-65.038322 735.729003 0 0.299843 59.116165C875.224608 879.275049 840.01914 918.254652 808.15902 918.254652zM874.923742 746.546891 139.195763 746.546891l-0.001023 0 0.001023 0L139.195763 554.500968c17.865737 14.76804 50.024676 21.362542 64.742572 21.362542 30.082552 0 76.258389-35.206492 96.423605-76.208245 22.637642 39.878109 57.441956 76.208245 97.796948 76.208245 42.651402 0 97.046828-33.780958 112.736912-70.386377 15.69213 35.756034 61.267258 70.386377 103.044714 70.386377 41.427469 0 84.70414-38.828146 106.416669-80.432655 25.388421 42.003618 56.370503 80.432655 109.367003 80.432655 8.197076 0 38.355356-7.046825 45.499399-8.395607L874.923742 746.546891zM813.76803 508.146044c-45.000002-0.023537-97.420353-34.982377-97.420353-63.666002l-21.59075 0c0 28.207765-43.100655 63.666002-86.251454 63.666002-41.380394 0-86.355836-36.330136-86.355836-63.666002l-21.588703 0c0 28.207765-57.670164 63.666002-99.073072 63.666002-43.150799 0-95.149528-27.585565-95.149528-63.666002l-21.563119 0c0 28.134084-45.449255 64.538924-86.926868 64.538924-42.103907 0-85.703959-25.909309-85.703959-64.538924L112.144389 382.508716l798.420771 0 0 61.971326 0.002047 0C910.169121 483.109657 852.773217 508.169581 813.76803 508.146044z"
                            fill="#cdcdcd" p-id="8568"></path>
                    </svg>
                </span>
                <span>商家</span>
                <span v-if="isSupplierSubmenuOpen">
                    <svg t="1684140376597" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14557" width="15"
                        style="margin-left: 70px;font-weight:bold">
                        <path
                            d="M316.9 473.8l333-333.1c17-17 44.5-17 61.49999999 0s17 44.5 1e-8 61.5l-309.69999999 309.8 309.69999999 309.7c17 17 17 44.5 0 61.50000001s-44.5 17-61.5-1e-8l-333-333c-10.4-10.4-19-24.701-16.599-38.2-2.4-13.5 6.1-27.8 16.599-38.2z"
                            p-id="14558" fill="#ffffff"></path>
                    </svg>
                </span>

                <span v-else>
                    <svg t="1684139878413" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6926" width="15" style="margin-left: 70px;">
                        <path
                            d="M707.1 550.2l-333 333.1c-17 17-44.5 17-61.5 0s-17-44.5 0-61.5L622.3 512 312.6 202.3c-17-17-17-44.5 0-61.5s44.5-17 61.5 0l333 333c10.4 10.4 19 24.7 16.6 38.2 2.4 13.5-6.1 27.8-16.6 38.2z"
                            p-id="6927" data-spm-anchor-id="a313x.7781069.0.i11" class="selected" fill="#ffffff"></path>
                    </svg>
                </span>
            </li>
            <ul v-show="isSupplierSubmenuOpen">
                <li class="flex items-center space-x-2 " @click="() => $router.push('/supplier/list').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;margin-left:20px;margin-top:10px;font-weight:bold">
                    <span>
                        <svg t="1684306196874" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9160" width="15" height="15">
                            <path
                                d="M352 416C349.632 423.168 320 512 200 512 107.2 512 32 448 32 337.792 32 283.264 74.688 192 160 64h704c85.312 128 128 219.264 128 273.792C992 448 916.8 512 824 512 704 512 674.368 423.168 672 416 669.632 423.168 640 512 512 512S354.368 423.168 352 416zM829.44 128H194.56C128.64 230.656 96 303.232 96 337.792 96 407.552 137.344 448 200 448c53.888 0 79.232-16 91.264-52.224 19.456-58.368 102.016-58.368 121.472 0C424.576 431.36 452.352 448 512 448c59.648 0 87.424-16.64 99.264-52.224 19.456-58.368 102.016-58.368 121.472 0 12.032 36.224 37.376 52.224 91.264 52.224 62.72 0 104-40.512 104-110.208 0-34.56-32.64-107.136-98.56-209.792zM832 576a32 32 0 1 1 64 0v224a160 160 0 0 1-160 160h-448A160 160 0 0 1 128 800V576a32 32 0 0 1 64 0v224A96 96 0 0 0 288 896h448a96 96 0 0 0 96-96V576z m-480 128h320a32 32 0 1 1 0 64h-320a32 32 0 1 1 0-64z"
                                p-id="9161" fill="#cdcdcd"></path>
                        </svg>
                    </span>
                    <span>商家列表</span>
                </li>

            </ul>

            <!-- 用户模块 -->
            <li class="flex items-center space-x-2"
                style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:20px" @click="UserSubmenu">
                <!-- 首页的svg -->
                <span>
                    <svg t="1684311172512" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12301" width="15" height="15">
                        <path
                            d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z"
                            fill="#cdcdcd" p-id="12302"></path>
                    </svg>
                </span>
                <span>用户</span>
                <span v-if="isUserSubmenuOpen">
                    <svg t="1684140376597" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14557" width="15"
                        style="margin-left: 70px;font-weight:bold">
                        <path
                            d="M316.9 473.8l333-333.1c17-17 44.5-17 61.49999999 0s17 44.5 1e-8 61.5l-309.69999999 309.8 309.69999999 309.7c17 17 17 44.5 0 61.50000001s-44.5 17-61.5-1e-8l-333-333c-10.4-10.4-19-24.701-16.599-38.2-2.4-13.5 6.1-27.8 16.599-38.2z"
                            p-id="14558" fill="#ffffff"></path>
                    </svg>
                </span>

                <span v-else>
                    <svg t="1684139878413" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6926" width="15" style="margin-left: 70px;">
                        <path
                            d="M707.1 550.2l-333 333.1c-17 17-44.5 17-61.5 0s-17-44.5 0-61.5L622.3 512 312.6 202.3c-17-17-17-44.5 0-61.5s44.5-17 61.5 0l333 333c10.4 10.4 19 24.7 16.6 38.2 2.4 13.5-6.1 27.8-16.6 38.2z"
                            p-id="6927" data-spm-anchor-id="a313x.7781069.0.i11" class="selected" fill="#ffffff"></path>
                    </svg>
                </span>
            </li>
            <ul v-show="isUserSubmenuOpen">
                <li class="flex items-center space-x-2 " @click="() => $router.push('/user/list').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;margin-left:20px;margin-top:10px;font-weight:bold">
                    <span>
                        <svg t="1684311329060" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="12779" width="15" height="15">
                            <path
                                d="M808.4 303.8c0-132.1-107.4-239.5-239.5-239.5S329.4 171.7 329.4 303.8c0 41.3 10.7 82 30.9 117.7 5.1 9 16.5 12.2 25.6 7.1 9-5.1 12.2-16.5 7.1-25.6-17-30.1-26-64.4-26-99.2 0-111.4 90.6-202 202-202s202 90.6 202 202-90.6 202-202 202C329 505.8 133.7 701 133.7 941c0 10.4 8.4 18.8 18.8 18.8s18.8-8.4 18.8-18.8c0-219.3 178.4-397.7 397.7-397.7 132 0 239.4-107.4 239.4-239.5zM517.8 700.7c0 10.4 8.4 18.8 18.8 18.8h334.9c10.4 0 18.8-8.4 18.8-18.8s-8.4-18.8-18.8-18.8H536.6c-10.4 0-18.8 8.4-18.8 18.8z m353.7 101.4H536.6c-10.4 0-18.8 8.4-18.8 18.8s8.4 18.8 18.8 18.8h334.9c10.4 0 18.8-8.4 18.8-18.8s-8.4-18.8-18.8-18.8z m0 120.1H536.6c-10.4 0-18.8 8.4-18.8 18.8s8.4 18.8 18.8 18.8h334.9c10.4 0 18.8-8.4 18.8-18.8s-8.4-18.8-18.8-18.8z"
                                fill="#cdcdcd" p-id="12780"></path>
                        </svg>
                    </span>
                    <span>用户列表</span>
                </li>
                <li class="flex items-center space-x-2" @click="() => $router.push('/user/chat').catch(err => { })"
                    style="cursor: pointer;color:#97A3B6;font-size:15px;margin-left:20px;margin-top:10px;font-weight:bold">
                    <span>
                        <svg t="1684311448521" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="14744" width="15" height="15">
                            <path
                                d="M512 64c259.2 0 469.333333 200.576 469.333333 448s-210.133333 448-469.333333 448a484.48 484.48 0 0 1-232.725333-58.88l-116.394667 50.645333a42.666667 42.666667 0 0 1-58.517333-49.002666l29.76-125.013334C76.629333 703.402667 42.666667 611.477333 42.666667 512 42.666667 264.576 252.8 64 512 64z m0 64C287.488 128 106.666667 300.586667 106.666667 512c0 79.573333 25.557333 155.434667 72.554666 219.285333l5.525334 7.317334 18.709333 24.192-26.965333 113.237333 105.984-46.08 27.477333 15.018667C370.858667 878.229333 439.978667 896 512 896c224.512 0 405.333333-172.586667 405.333333-384S736.512 128 512 128z m-157.696 341.333333a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m159.018667 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m158.997333 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z"
                                fill="#cdcdcd" p-id="14745"></path>
                        </svg>
                    </span>
                    <span>用户聊天</span>
                </li>
                <!-- 生成一个好看的菜单 -->


            </ul>
        </ul>

    </div>
</template>

<script>
export default {
    name: "MyNav",
    data() {
        return {
            isGoodsSubmenuOpen: false,
            isOrderSubmenuOpen: false,
            isSupplierSubmenuOpen: false,
            isUserSubmenuOpen: false
        }
    },
    methods: {
        GoodsSubmenu() {
            this.isGoodsSubmenuOpen = !this.isGoodsSubmenuOpen;
        },
        OrderSubmenu() {
            this.isOrderSubmenuOpen = !this.isOrderSubmenuOpen;
        },
        SupplierSubmenu() {
            this.isSupplierSubmenuOpen = !this.isSupplierSubmenuOpen
        },
        UserSubmenu() {
            this.isUserSubmenuOpen = !this.isUserSubmenuOpen
        }
    }
}
</script>

<style scoped>
.nav {
    width: 15%;
    float: left;
    background-color: #20293A;
    height: 100vh;
    color: #fff;
    font-weight: normal;
    color: #fff;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.nav ul {
    margin-left: 5px;
    margin-right: 10px;
    color: #fff;
}
</style>